<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 200px;
        }
    </style>
</head>
<body>
    <h1>商品页面</h1>
    <div>
        <input type="text" placeholder="商品名称">
        <input type="text" placeholder="商品价格">
        <input type="text" placeholder="商品图片">
        <input type="text" placeholder="商品描述">
        <input type="button" value="添加" onclick="addFn()">
    </div>
    <ul>
        <li>
            <!-- <h2>商品名称</h2>
            <p>商品图片</p>
            <img src="" alt=""> -->
        </li>
    </ul>
    <script src="../js/axios.min.js"></script>
    <script src="../js/api.js"></script>
    <script>
        let ipts = document.querySelectorAll("input");
        async function addFn(){
            let pname = ipts[0].value;
            let pprice = ipts[1].value;
            let pimg = ipts[2].value;
            let pdesc = ipts[3].value;
            let uid = localStorage.getItem("uid");
            let params = {pname, pprice, pimg, pdesc, uid};
            let {data} = await axios.get(productAddAPI, {params});
            console.log(data);
            loadList();

        }

        loadList();
        async function loadList(){
            let uid = localStorage.getItem("uid")
            let pagenum = 0;
            let pagesize = 20;
            let params = {pagenum, pagesize, uid}
            let {data} = await axios.get(proudtListAPI, {params});
            console.log(data);
            let listArr = data.data;
            console.log(listArr);
            let html = "";
            listArr.forEach(pObj=>{
                html += `
                    <li>
                        <h2>${pObj.pname}</h2>
                        <p>${pObj.pprice}</p>
                        <img src="${pObj.pimg}" alt="">
                        <button onclick = "delFn(${pObj.pid})">删除</button>
                        <a href="update.html?pid=${pObj.pid}">修改</a>
                    </li>
                
                `
            })
            let ul = document.querySelector("ul");
            ul.innerHTML = html;
        }
    
        async function delFn(pid){
            console.log(pid);
            let uid = localStorage.getItem("uid");
            let token = localStorage.getItem("token");
            let params = {uid, token, pid};
            let {data} = await axios.get(productDeleteAPI, {params});
            console.log(data);
            loadList();
        }

    </script>
</body>
</html>